<template>
  <div id="app">
    <header>
      <div class="portrait">
        <img src="../../../assets/images/security-icon.png" alt="">
      </div>
    </header>
    <ul>
      <li><router-link to="/updatePassword">修改登录密码 <span>></span></router-link></li>
      <li><router-link to="/updatePaymentCode">修改支付密码 <span>></span></router-link></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "security",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      height: 9rem;
      background: #ff9500;
      box-sizing: border-box;
      padding: 1.36rem 0.5rem 0;
      .portrait {
        border-radius: 50%;
        width: 3rem;
        margin: 1.2rem auto 0rem;
      }
    }
    ul {
      background: #fff;
      li {
        font-size: 0.597rem;
        line-height: 1.87rem;
        margin-left: 0.5rem;
        padding-right: 0.5rem;
        a {
          display: block;
        }
        &:last-child{
          border-top: 1px solid #dcdcdc;
        }
        span {
          float: right;
          font-family: SimSun;
          font-size: 0.8rem;
          font-weight: bold;
          margin-left: 0.3rem;
          color: #c6c6c6;
        }
      }
    }
  }
</style>
